<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - blob example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="100"></canvas>

    <script src="../crayon.min.js"></script>
    <script>

      var canvas = new crayon.Canvas({ id: "my-canvas" });

      var text = new crayon.Text({
        label: "Hello World!",
        bold: true,
        x: 200,
        y: 50,
        size: 60,
        color: '#f80',
        stroke: 1,
        strokeColor: '#000'
      });

      canvas.add(text);

      crayon.timer.on('frame', function(time) {
        var t = time / 1000;
        var sin = Math.sin(t * 4);

        text.set({
          scaleX: 1 + sin / 10,
          scaleY: 1 - sin / 10
        });
      });

    </script>
  </body>
</html>